{include file=comm/head.html}
{include file=comm/top.html}
<div class="container pages">
    {include file=comm/position.html}
    <div class="row">
        <div class="col-12 col-lg-6 mb-5">
            <div class="view">
                <a class="arrow-left" href="#"></a>
                <a class="arrow-right" href="#"></a>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        {pboot:if({content:ispics}==1)}
                        {pboot:pics num=10 id={content:id}}
                        <div class="swiper-slide">
                            <img src="[pics:src]" alt="[pics:alt]">
                        </div>
                        {/pboot:pics}
                        {else}
                        <div class="swiper-slide">
                            <img src="{content:ico}" alt="{content:title}">
                        </div>
                        {/pboot:if}
                    </div>
                </div>
            </div>
            <div class="preview mt-3">
                <a class="arrow-left" href="#"></a>
                <a class="arrow-right" href="#"></a>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        {pboot:pics num=10 id={content:id}}
                        <div class="swiper-slide {pboot:if([pics:i]==1)}active-nav{/pboot:if}">
                            <img src="[pics:src]" alt="[pics:alt]">
                            <p>[pics:alt]</p>
                        </div>
                        {/pboot:pics}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 mb-3 pr-3">
            <h2 class="border-bottom pb-2 fs-sm-28 fs-20">{content:title}--多图判断值{content:ispics}</h2>
            <div class="text-secondary my-3 border-bottom-dashed lh-3">
                上架时间：{content:date style=Y-m-d}
            </div>
            <div class="text-secondary my-3 border-bottom-dashed lh-3">
                浏览次数：{content:visits}
            </div>
            <div class="text-secondary my-3 border-bottom-dashed lh-3">
                产品类型：{content:ext_type}
            </div>
            <div class="text-secondary my-3 border-bottom-dashed lh-3">
                产品颜色：{content:ext_color}
            </div>
            <div class="text-secondary my-3 border-bottom-dashed lh-3">
                产品价格：￥{content:ext_price}
            </div>
            <div class="my-3 lh-3">
                {pboot:sort scode=11}
                <a href="[sort:link]" class="btn btn-danger">马上咨询</a>
                {/pboot:sort}
            </div>
        </div>
    </div>
    <h5 class="border-bottom border-info pb-2 mb-2"><i class="fa fa-sliders" aria-hidden="true"></i> 产品详情</h5>
    <div class="content">
        <br>
        <h3>多图上传2</h3>
        <div class="flex" style="display: flex;">
            <!-- 扩展字段的多图上传和默认的多图对比增加了field属性，属性值对应字段名称 -->
            {pboot:pics id={content:id} field=ext_pics_22}
            <div class="item">
                <img src="[pics:src]" alt="[pics:alt]">
                <p>[pics:alt]</p>
            </div>
            {/pboot:pics}
        </div>
        <hr>
    {content:content}</div>
    <div class="text-secondary lh-2">
        <p>上一篇：{content:precontent}</p>
        <p>下一篇：{content:nextcontent}</p>
    </div>
    <!-- 相关案例 -->
    <br>
    <h5 class="border-bottom border-info pb-2 mb-2"><i class="fa fa-sliders" aria-hidden="true"></i> 相关案例</h5>
    <div class="row">
        {pboot:list scode=8 num=4 order=sorting filter=a.id|{content:ext_rel_case} fuzzy=0}
        <div class="col-12 col-sm-6 col-lg-3 wow zoomIn" data-wow-delay="[list:i]00ms" data-wow-duration="1s">
            <div class="card">
                <div class="card-img-150"><a href="[list:link]"><img class="card-img-top" src="[list:ico]" alt="[list:title]"></a></div>
                <div class="card-body">
                    <h5 class="card-title"><a href="[list:link]">[list:title lencn=12]</a></h5>
                    <p class="card-text">
                        [list:content drophtml=1 dropblank=1 lencn=50]
                    </p>
                    <p>
                        {pboot:tags id=[list:id] scode={sort:tcode}}
                        <a href="[tags:link]"><span class="badge badge-secondary">[tags:text]</span></a>
                        {/pboot:tags}
                    </p>
                </div>
            </div>
        </div>
        {/pboot:list}
    </div>
</div>
{include file=comm/comment.html}
<script src="{pboot:sitetplpath}/swiper-4.3.5/js/swiper.min.js"></script>
<script>
var viewSwiper = new Swiper('.view .swiper-container', {
    on: {
        slideChangeTransitionStart: function() {
            updateNavPosition()
        }
    }
})

$('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
    e.preventDefault()
    if (viewSwiper.activeIndex == 0) {
        viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
        return
    }
    viewSwiper.slidePrev()
})
$('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
    e.preventDefault()
    if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
        viewSwiper.slideTo(0, 1000);
        return
    }
    viewSwiper.slideNext()
})

var previewSwiper = new Swiper('.preview .swiper-container', {
    //visibilityFullFit: true,
    slidesPerView: 'auto',
    allowTouchMove: false,
    on: {
        tap: function() {
            viewSwiper.slideTo(previewSwiper.clickedIndex)
        }
    }
})

function updateNavPosition() {
    $('.preview .active-nav').removeClass('active-nav')
    var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
    if (!activeNav.hasClass('swiper-slide-visible')) {
        if (activeNav.index() > previewSwiper.activeIndex) {
            var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
            previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
        } else {
            previewSwiper.slideTo(activeNav.index())
        }
    }
}
</script>
{include file=comm/foot.html}